<template>
    <div class="mine-other">
        <h5 class="title">更多服务</h5>
        <mine-cell text="主题颜色" icon="icon-layout" @click="onColor"></mine-cell>
        <mine-cell text="联系客服" icon="icon-customer-service"></mine-cell>
        <mine-cell text="关于看点" icon="icon-prompt" @click="onAbout"></mine-cell>
        <mine-cell text="退出登录" icon="icon-sign-out" @click="onQuit" v-if="this.$store.state.userInfo"></mine-cell>
        <mine-share :shareShow="shareShow" title="颜色选择" @onBg="onBg">
            <div class="list">
                <div class="item" @click="onEditColor(index)" v-for="(item,index) in this.$store.state.colorItem" :key="index">
                    <div class="color" :style="{'background':item.bgColor}"></div>
                    <span class="name" :style="{'color':item.color}">{{item.name}}</span>
                </div>
            </div>
        </mine-share>
        <mine-dialog
        :dialogShow="dialogs.dialogShow"
        :title="dialogs.title"
        :content="dialogs.content"
        :cancel="dialogs.cancel"
        :cancelColor="dialogs.cancelColor"
        :cancelText="dialogs.cancelText"
        :enter="dialogs.enter"
        :enterColor="dialogs.enterColor"
        :enterText="dialogs.enterText"
        @clickCancel="clickCancel"
        @clickEnter="clickEnter"
        >
        </mine-dialog>
    </div>
</template>

<script>
import MineShare from '../Common/Share/Index'
import MineDialog from '../Common/Dialog/Index'
import MineCell from '../Common/Cell/Index'
export default {
    name: 'MineOther',
    components: {
        MineShare,
        MineDialog,
        MineCell
    },
    data() {
        return {
            shareShow: false,
            
            dialogs: {
                dialogShow: false,
                title: '',
                content: '',
                cancel: false,
                cancelColor: '',
                cancelText: '',
                enter: false,
                enterColor: '',
                enterText: ''
            }
        }
    },
    methods: {
        onQuit() {
            this.dialogs.dialogShow = true
            this.dialogs.title = '提示'
            this.dialogs.cancel = true
            this.dialogs.cancelText = '取消'
            this.dialogs.cancelColor = '#333'
            this.dialogs.enter = true
            this.dialogs.enterText = '确认'
            this.dialogs.enterColor = this.$store.state.colorItem[this.$store.state.colorIndex].color
            this.dialogs.content = '您确定要退出登录吗?'
        },
        onAbout() {
            this.dialogs.dialogShow = true
            this.dialogs.title = '关于看点'
            this.dialogs.cancel = true
            this.dialogs.cancelText = '关闭'
            this.dialogs.cancelColor = this.$store.state.colorItem[this.$store.state.colorIndex].color
            this.dialogs.enter = false
            this.dialogs.content = 'v1.0'
        },
        //点击主题颜色显示弹出层
        onColor() {
            this.shareShow = true
        },
        //修改主题颜色,并关闭弹出层
        onEditColor(value) {
            this.$store.commit("editColor",value)
            this.shareShow = false
            
        },
        //点击背景关闭弹出层
        onBg(e) {
            this.shareShow = e
        },
        clickCancel() {
            this.dialogs.dialogShow = false
        },
        clickEnter() {
            this.$store.commit('setUserInfo','')
            this.dialogs.dialogShow = false
        }
    }
}
</script>

<style scoped>
.mine-other .title{
    padding:0.2rem;
    font-size:0.30rem;
}
.mine-other .van-cell{
    color:#333;
    font-weight:600;
}
.mine-other .p-title{
    text-align: center;
    color:#333;
    padding:0.16rem 0 0.6rem 0;
    font-size:0.36rem;
}
.mine-other .list{
    display: flex;
    padding:0 0.4rem;
    justify-content:space-between;
}
.mine-other .list .item{
    width:20%;
    text-align: center;
}
.mine-other .list .item .color{
    width:1rem;
    height:1rem;
    border-radius:0.16rem;
    margin-bottom:-0.4rem;
    margin:0 auto -0.4rem auto;
    box-shadow:2px 2px 10px rgba(0, 0, 0, 0.3);
}
.mine-other .list .item .name{
    font-size:0.32rem;
    font-weight:600;
}
</style>